body {
	height: 100%;
	width: 100%;
	background-color: #f3f3f3;
	/* 必须设置内边距外边距为0，要不然主体会和周围有白缝 */
	margin: 0;
	padding: 0;
}

/******* 总容器部分 *******/
.wrapper {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

/******* header部分 *******/
.wrapper .header-wrapper {
	width: 100%;
	height: 13vw;
	margin: 0;
	z-index: 999;
}
.wrapper .header {
	width: 100%;
	height: 13vw;
	z-index: 999;
	
	background-color: #ffcf00;
	position: fixed;
	display: flex;
	align-items: center;
	
}
	/* 城市 */
.wrapper .header .header-city {
	font-size: 3.8vw;
	margin-left: 4vw;
}
.wrapper .header .header-city .fa-angle-down {
	margin-left: 2vw;
}
	/* 搜索框 */
.wrapper .header .header-search {
	background-color: white;
	width: 65%;
	height: 9vw;
	border-radius: 3vw;
	margin-left: 3vw;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	font-size: 3.5vw;
	color: #AEAEAE;
	font-family: "宋体";
}
.wrapper .header .header-search .fa-search {
	margin-right: 1.8vw;
}	
	/* 用户 */
.wrapper .header-user .fa-user-circle {
	font-size: 3.5em;
	margin-left: 5vw;
}

/******* 导航到app部分 ********/
.wrapper .guide-wrapper {
	width: 100%;
	height: 14vw;
	margin: 0;
	z-index: 999;
}
.wrapper .guide {
	width: 100%;
	height: 14vw;
	background-color: black;
	position: fixed;
	z-index: 999;
	
	display: flex;
	justify-content: space-between;/*两端对齐*/
	align-items: center;
}
	/* 左边部分 */
.wrapper .guide-left {
	margin-left: 4vw;
	
	display: flex;
	justify-content: left;
	align-items: center;
}
		/* 左边logo */
.wrapper .guide-left-logo {
	width: 9vw;
	height: 9vw;
	border-radius: 2vw;
	background-color: #ffcf00;
	font-size: 3.7vw;
	font-family: '微软雅黑';
	font-weight: bold;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
		/* 左边文字 */
.wrapper .guide-content {
	margin-left: 3vw;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*文字左对齐*/
}

.wrapper .guide-content {
	align-items: start;
}

.wrapper .guide-content p:first-child {/*使用伪类，对第一个标签设置样式*/
	color: white;
	font-size: 3.8vw;
	font-weight: bold;
	margin: 0;
}
.wrapper .guide-content p:last-child {/*使用伪类，对最后一个标签设置样式*/
	color: white;
	font-size: 3.6vw;
	margin: 0;
}

		/* 右边的按钮 */
.wrapper .guide-btn {
	height: 8vw;
	width: 14vw;
	background-color: #ffcf00;
	border-radius: 2vw;
	margin-right: 4vw;
	font-size: 3.5vw;
}

/****** 主体内容部分 *******/
	
.wrapper .home_body {/*  */
	width: 100%;
	
}
	/* 分类导航部分 */
.wrapper .home_body .category {/* 分类导航的ul部分 */
	width: 100%;
	height: 50vw;
	margin-top: 5vw;
	padding: 0 0 5vw;
	border-bottom: 2.5vw solid #eee;
	
	display: flex;/* li标签本来是有小圆点的，但是使用flex布局后小圆点就没了 */
	flex-wrap: wrap; /* 让列表中的元素可以自动折行 */
	justify-content: space-around;
	align-items: center;
}
.wrapper .home_body .category li {/* li标签 */
	width: 17vw;
	font-size: 3.5vw;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.wrapper .home_body .category li img {
	width: 70%;
}
	/* 猜你喜欢部分 */
.wrapper .home_body .recommend {
	width: 96%;
}	
.wrapper .home_body .recommend .cainixihuan {/* 文字部分 */
	width: 100%;
	letter-spacing: 0.4vw;/* 字间距 */
	font-size: 5vw;
	font-weight: bold;
	margin: 2.5vw;
	padding-bottom: 2.5vw;
	border-bottom: 2px solid #ccc;
}
.wrapper .home_body .recommend .business-list {/*商家列表*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.wrapper .home_body .recommend .business-list li {/*列表元素*/
	background-color: white;
	padding: 3vw;/*考虑想让每个商家都弄成浮窗的感觉*/
	margin: 1vw;
	border-radius: 2vw;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
			/*********/
.more {
	width: 100%;
	height: 100%;
	background-color: black;
	position: absolute;
	border-radius: 2vw;
	z-index: -1;
	opacity: 0;

	display: flex;
	justify-content: center;
	align-items: center;
}
.more img {
	width: 17%;
	border-radius: 10vw;
	margin: 3vw;
}
@keyframes trans {
	0% {
		opacity: 0;
		width: 90%;
		height: 90%;
		z-index: -1;
	}
	100% {
		opacity: 70%;
		width: 100%;
		height: 100%;
		z-index: 888;
	}
}
			/*********/
.wrapper .home_body .recommend .business-list .business-list-img {/*商家图片*/
	margin: 0;
	padding: 0;
	width: 30vw;
	flex: 1;
}
.wrapper .home_body .recommend .business-list .business-list-content {/*商家内容总体*/
	margin-left: 2vw;
	width: 100%;
	height: 30vw;
	font-size: 3vw;
	flex: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
}
.content-1 { /*商家内容第一行*/
	width: 100%;
	display: flex;
	justify-content: left;
	align-items: center;
}
.content-1-l {
	width: 8vw;
	height: 4vw;
	background-color: red;
	border-radius: 0.75vw;
	margin: 1vw;
	color: white;

	display: flex;
	justify-content: center;
	align-items: center;
}
.content-1-m {
	font-size: 4.5vw;
	font-weight: bold;
	margin-left: 1.5vw;
}
.content-1 .most {
	margin-left: auto;/*当父容器使用左对齐的时候，在子元素最后一个这里这样设置，可以让子元素右对齐*/
	color: #AEAEAE;
	z-index: 800;
}
.content-2 {/*商家内容第二行*/
	width: 100%;
	display: flex;
	justify-content: left;
	align-items: center;
}
.content-2-l {
	color: red;
	font-size: 3.7vw;
}
.content-2-m {
	color: #7c7c7c;
	margin-left: 2vw;
}
.content-2 div {
	color: #7c7c7c;
	font-weight: bold;
	font-size: 3.3vw;
	margin-left: auto;
	padding-bottom: 0.25vw;/*文字和底部的空白与文字和顶部的空白不等，所以设置一下*/
	padding-left: 1vw;
	padding-right: 1vw;
	border: 1px #7b7b7b solid;
	border-radius: 1vw;
}
.content-3 { /*商家内容第三行*/
	width: 100%;
	color: #7c7c7c;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content-4 {/*商家内容第四行*/
	width: 100%;
	display: flex;
	justify-content: left;
	align-items: center;
}
.content-4 div {
	color: #ff5900;
	background-color: #fafad2;/*亮菊黄*/
	border-radius: 1vw;
	padding: 0.5vw 1vw;
}
.content-4 :first-child {
	margin-right: 1.25vw;
}

/****** 底部菜单栏部分 *******/
.footer-wrapper {
	width: 100%;
	height: 11vw;
	margin-top: 5vw;
}
.footer {
	width: 100%;
	height: 14vw;
	margin-top: 5vw;
	border-top: 1px solid #eeeeee;
	background-color: white;

	position: fixed;
	left: 0;
	bottom: 0;

	display: flex;
	justify-content: space-around;
	align-items: center;
}
.footer div {
	width: 25%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.footer div i {
	border: 1px solid;
	padding: 1vw;
	border-radius: 5vw;
	color: #fafad2;
	background-color: #ffcf00;
}
.footer div span {
	font-size: 3vw;
}





